<template>
  <div id="box apps">
    <section class="regis">
      <div class="title">
        <h3>{{ classificationData.title }}</h3>
      </div>
      <div class="box3">
        <div class="box1">
          <div class="input">
            <!-- <img src="../images/用户.png" style="width: 30px;height: 30px;"> -->
            <span class="ipttext"><img src="./images/user.png" alt="" /></span>
            <input
              v-model="user.username"
              class="username"
              placeholder="请输入您的用户名"
              required
            />
          </div>
          <div class="input">
            <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
            <span class="ipttext"><img src="./images/psw.png" alt="" /></span>
            <input
              v-model="user.password"
              class="password"
              id="password"
              placeholder="请输入您的密码"
              type="password"
              required
            />
          </div>
          <div class="inputs">
            <!-- <img src="../images/密码.png" style="width: 30px;height: 30px;"> -->
            <span class="ipttexts"><img src="./images/yzm.png" alt="" /></span>
            <input
              class="verificationcode"
              id="verificationcode"
              placeholder=""
              style="border: 0; width: 100%"
              type="text"
              required
            />
            <!-- <a href="#" onclick="change()" style="font-size: 12px;">看不清请换一张?</a> -->
          </div>
          <div class="yzmimg">
            <img src="../login/images/yzmimg.png" id="checkedText" />
            <a href="#" @click="change">换一张</a>
          </div>

          <div class="register" @click="login">
            <img
              src="./images/register.png"
              alt=""
              style="width: 20px"
              class="regimg"
            />
            <button type="submit" class="regbtn" id="button">登录</button>
          </div>
        </div>

        <div class="toreg">
          <router-link :to="`/register/${classificationData.title}`"
            >我没有账号，点击 <span>【注册】</span></router-link
          >
          <!-- <a href="">【注册】</a> -->
        </div>
      </div>
    </section>

    <el-button v-if="el" :plain="true" @click="open">打开消息提示</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data: function () {
    return {
      user: {
        username: "",
        password: "",
      },
      el: false,
      classificationId: 1, //赛事id
      classificationData: {}, //赛事标题和id,
      loginflg: false,
    };
  },
  methods: {
    login() {
      // console.log(1);

      axios({
        url: "http://localhost:3002/competition/user/login",
        method: "post",
        data: this.user,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.success === true) {
          // alert(res.data.msg);
          this.$router.push({
            name: "home",
            params: { classificationData: this.classificationData },
          });
        } else {
          alert(res.data.msg);
        }
      });
    },

    change() {},

    open() {
      this.$message("这是一条消息提示");
    },

    //获取赛事名称:
    getclassificationTitle() {
      axios({
        url: "http://localhost:3002/competition/classification/getbyId",
        method: "post",
        data: { id: this.classificationId },
      }).then((res) => {
        this.classificationData = res.data.list[0];
        // console.log(this.classificationData);
      });
    },
  },

  mounted() {
    document.body.style.backgroundColor = "transparent"; // 设置 body 背景色为透明

    // 获取赛事id
    const urlParams = new URLSearchParams(window.location.search);
    this.classificationId = urlParams.get("param1");
    this.getclassificationTitle();
  },
};
</script>

<style>
.regis {
  position: absolute;
  top: 25%;
  left: 40%;
  margin: 0;
  vertical-align: middle;
}

.title {
  color: #fff;
  margin: 0;
  margin-bottom: 25px;
  letter-spacing: 3px;
}

.input input {
  border: 0;
  width: 100%;
}

#box {
  position: relative;
  text-align: center;
  height: 100vh;
  background: url("../../assets/userBGR.jpg") !important;
  /* background-size: 100% 100%; */
  /* background-repeat: no-repeat; */
}

.ipttext img {
  width: 20px;
  height: 20px;
}

.ipttexts img {
  width: 20px;
  height: 20px;
  margin: 0px 6px;
}

.box1 {
  /* background-color: rgb(78, 127, 234); */
  background: linear-gradient(#fff, rgb(78, 127, 234));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  width: 350px;
  margin: 0 auto;
  position: relative;
  border-radius: 10px;
  padding: 10px 0px;
}

.register {
  width: 85px;
  height: 60px;
  border-radius: 100% 4px 0 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: rgba(220, 38, 38, 0.2);
  cursor: pointer;
}

.regimg {
  width: 15px;
  height: 20px;
  margin-left: 20px;
  margin-top: 3px;
}

.regbtn {
  width: 50px;
  height: 20px;
  font-size: 15px;
  margin-top: 3px;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
}

.input {
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
}

.inputs {
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  /* transform: translateX(-50%); */
}

.yzmimg img {
  width: 50px;
  height: 30px;
}

.yzmimg {
  position: absolute;
  /* transform: translateY(186%); */
  right: 120px;
  top: 162px;
  /* transform: translateX(50%); */
}

.yzmimg a {
  position: absolute;
  font-size: 13px;
  width: 50px;
  top: 5px;
  text-decoration: none;
}

.inputs {
  width: 100px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  transform: translateX(-50%);
}

.ipttext {
  /* word-spacing: 2px; */
  letter-spacing: 5px;
  font-size: 15px;
  width: 40px;
  padding: 4px 1px;
  background-color: rgb(45, 119, 231);
  color: #fff;
  /* background-color: aquamarine; */
}

.ipttexts {
  letter-spacing: 5px;
  font-size: 15px;
  width: 40px;
  padding: 3px 2px;
  background-color: rgb(45, 119, 231);
  color: #fff;
}

.box3 {
  display: flex;
  flex-direction: column;
}

.text1 {
  color: #fff;
  margin: 0 auto;
  transform: translateX(50%);
}

.register {
  background: linear-gradient(rgb(78, 127, 234), rgb(8, 50, 141));
}

.toreg {
  color: #fff;
  transform: translateX(27%);
  font-size: 15px;
  padding-top: 10px;
  cursor: pointer;
}

.toreg a {
  text-decoration: none;
  color: blue;
}
</style>